<template>
    <div>
        <p style="color: #9a9a9a; font-size: 0.2rem;padding-top: 10px;background-color: #fafafa;">
            请在确认收到物品后，标记出实际收货的数量，并核对收货凭证。</p>
      <!--办公用品-->
        <div v-if="isShow" class="mui-flex" v-for="(item,index) in selectAr" style=" padding: 10px 0 10px;border-bottom: 1px solid #e1e1e1;">
            <div class="cell3">
                <p class="voucher-title" >{{item.name}}</p>
                <p  class="voucher-destrice" >{{item.specName}}</p>

            </div>
            <div class="cell">
                <div class="office-number"></div>
                <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f 3整体的颜色3cc8a8-->
                <Spinner  type="3" :index="index" :max="500" min="0" unit="1"  @addnumberclick="addnumberclick"
                          @minusclick="minusclick" :amounts="item.amounts" :dataAr="dataAr" width="80px" height="30px" >{{item.amounts}}</Spinner>
            </div>
        </div>
        <!--凭证请领-->
        <div  v-if="!isShow" class="mui-flex" v-for="(item,index) in selectAr" style=" padding: 10px 0 10px;border-bottom: 1px solid #e1e1e1;">
            <div class="cell3">
                <p class="voucher-title" >{{item.name}}</p>
            </div>
            <div class="cell">
                <div class="number"></div>
                <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f 3整体的颜色3cc8a8-->
                <Spinner  type="3" :index="index" :max="500" min="0" unit="1"  @addnumberclick="addnumberclick"
                          @minusclick="minusclick"  :amounts="item.amounts" :dataAr="dataAr" width="80px" height="30px" >{{item.amounts}}</Spinner>

            </div>
        </div>

        <div style="background-color: #fafafa;height: 800px;padding-top: 20px">
            <yd-button size="large" type="primary" @click.native="gotonextClick" style="background-color:#3cc8a8;color:white;height: 50px">确定</yd-button>

        </div>
    </div>

</template>

<script>

    import {userInfoData} from '../../globalVariables'
    import Spinner from "@/components/spinner.vue";

    export default {
        name: "voucherShouhuonum",

        data() {
            return {
                isShow:'',
                applicationUuid:'',
                dataAr:[],//初始数据
                type: '',//1 是办公用品 2是凭证请领
                selectAr:[],

            }
        },
        methods:{
            addnumberclick(data)
            {
                for (var i=0;i<this.selectAr.length;i++)
                {
                    if (data.index===i)
                    {
                        var dic={};
                        dic=this.selectAr[data.index];
                        dic['amounts']=data.amounts;
                        this.selectAr.splice(i,1,dic);
                    }
                }

            },
            minusclick(data)
            {
               for (var i=0;i<this.selectAr.length;i++)
               {
                   if (data.index===i)
                   {
                       var dic={};
                       dic=this.selectAr[data.index];
                       dic['amounts']=data.amounts;
                       this.selectAr.splice(i,1,dic);
                   }
               }

            },
            gotonextClick()
            {
                if (this.type ==='1')//1 是办公用品 2是凭证请领
                {
                    for (var j=0;j<this.dataAr.length;j++) {
                        var num1=this.dataAr[j];
                        var num2=this.selectAr[j];
                        if (num2>num1)
                        {
                            this.$dialog.toast({
                                mes: '不得大于采购单上的数量！',
                                timeout: 1500
                            });
                            return;
                        }
                    }

                    var newAr = new Array();
                    for (var i=0;i<this.selectAr.length;i++) {
                        var dic={};
                        dic['confirmAmounts']=this.selectAr[i].amounts;
                        dic['uuid']=this.selectAr[i].uuid;
                        newAr.push(dic);
                    }
                    //1 是办公用品 2是凭证请领
                     this.$router.replace({name: 'voucherShouhuoimg', params: {applicationUuid: this.applicationUuid,uuidAr:newAr,type:'1'}});


                }else
                {

                    for (var j=0;j<this.dataAr.length;j++) {
                        var num1=this.dataAr[j].amounts;
                        var num2=this.selectAr[j].amounts;
                        if (num2>num1)
                        {
                            this.$dialog.toast({
                                mes: '不得大于采购单上的数量！',
                                timeout: 1500
                            });
                            return;
                        }
                    }

                    var newAr = new Array();
                    for (var i=0;i<this.selectAr.length;i++) {
                        var dic={};
                        dic['confirmAmounts']=this.selectAr[i].amounts;
                        dic['uuid']=this.selectAr[i].uuid;
                        newAr.push(dic);
                    }
                    //1 是办公用品 2是凭证请领
                    this.$router.replace({name: 'voucherShouhuoimg', params: {applicationUuid: this.applicationUuid,uuidAr:newAr,type:'2'}});

                }




            },
        },
        components: {
            Spinner
        },
        created()
        {
            this.applicationUuid = this.$route.params.applicationUuid;
            this.type = this.$route.params.type;
            this.dataAr=this.$route.params.dataAr;
            this.selectAr=this.dataAr;

            if (this.type ==='1')//1 是办公用品 2是凭证请领
            {
                this.isShow=true;

            }else
            {
                this.isShow=false;

            }


        },
    }
</script>

<style scoped>
    .voucher-title {
        color: #464646;
        font-size: 0.25rem;
        text-align: left;
        padding-left: 20px;
        padding-top: 15px;
        width: 100%;
    }
    .voucher-destrice {
        color: #9a9a9a;
        font-size: 0.20rem;
        text-align: left;
        padding-left: 20px;
        padding-top: 15px;
        width: 100%;
    }
    .office-number {
        padding-right: 20px;
        padding-top: 20px;
    }
    .number {
        padding-right: 20px;
        padding-top: 10px;
    }
</style>